<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="{{ url_for('static' , filename='modular/layui/css/layui.css') }}"/>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-form">

        <table class="layui-table" id="commTable" style="width: 50%;margin: 0px auto 20px auto;">
            <colgroup>
                <col width="50">
                <col width="50">
                <col width="100">
                <col width="100">
                <col width="100">
            </colgroup>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>模块</td>
                    <td>别名</td>
                    <td>模型</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>

        <table class="layui-table" id="AREA_DETECT_Table" style="width: 50%;margin: 0px auto 20px auto;">
            <colgroup>
                <col width="50">
                <col width="50">
                <col width="100">
                <col width="100">
                <col width="100">
            </colgroup>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>模块</td>
                    <td>别名</td>
                    <td>模型</td>
                    <td>操作<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);" onclick="batchUpdate(this,'update_areadetect')" style="margin-left: 15px;">批量更新</a></td>
                </tr>
            </thead>
            <tbody id="AREA_DETECT_Table_Tbody">

            </tbody>
        </table>

        <table class="layui-table" id="RECALL_Table" style="width: 50%;margin: 0px auto 20px auto;">
            <colgroup>
                <col width="50">
                <col width="50">
                <col width="100">
                <col width="100">
                <col width="100">
            </colgroup>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>模块</td>
                    <td>别名</td>
                    <td>模型</td>
                    <td>操作<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);"  onclick="batchUpdate(this,'update_recall')" style="margin-left: 15px;">批量更新</a></td>
                </tr>
            </thead>
            <tbody id="RECALL_Table_Tbody">

            </tbody>
        </table>
    </div>
</div>
    <script  src="{{ url_for('static',filename='modular/layui/layui.all.js') }}" charset="utf-8"></script>
    <script >

        var $ = layui.$,layer = layui.layer;
        var config_str = '{{ Args.config_str|safe }}';
        var config_obj = JSON.parse(config_str);
        var token = '{{ Args.token }}';
        var AREA_DETECT_MODELS_DIR = config_obj.AREA_DETECT_MODELS_DIR;
        var AREA_DETECT_MODEL_DICT = config_obj.AREA_DETECT_MODEL_DICT;
        var AREA_DETECT_SLICE_MODEL_DICT =  config_obj.AREA_DETECT_SLICE_MODEL_DICT;
        var DOCUMENT_CLF = config_obj.DOCUMENT_CLF.MODEL;
        var LAYOUT_CLF = config_obj.LAYOUT_CLF.MODEL;
        var RECALL = config_obj.RECALL;
        var TEXTDESKEW_MODEL = config_obj.TEXTDESKEW_MODEL;
        var TYPE_CLF = config_obj.TYPE_CLF.MODEL;
        var tbody =  document.getElementById('tbody');

        var tr = document.createElement('tr');
        addElement(tr , '1' , 'DOCUMENT_CLF','证件',DOCUMENT_CLF.split('/')[1] , '<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);" model_type="document_clf" onclick="updateModel(this,\'update_classifier\')">更新</a>');
        var tr1 = document.createElement('tr');
        addElement(tr1 , '2' , 'LAYOUT_CLF','版面' ,LAYOUT_CLF.split('/')[1] , '<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);" model_type="layout_clf" onclick="updateModel(this,\'update_classifier\')">更新</a>');
        var tr2 = document.createElement('tr');
        addElement(tr2 , '3' , 'TEXTDESKEW_MODEL','纠偏' ,TEXTDESKEW_MODEL.split('/')[1] ,'<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);" model_type="deskew_model" onclick="updateModel(this,\'update_classifier\')">更新</a>');
        tbody.appendChild(tr);
        tbody.appendChild(tr1);
        tbody.appendChild(tr2);
        var i = 1;

        $.each(AREA_DETECT_MODEL_DICT,function (key,val) {
            var AREA_DETECT_Table_Tbody =  document.getElementById('AREA_DETECT_Table_Tbody');
            var tr3 = document.createElement('tr');
            addElement(tr3,i,'AREA_DETECT',key,val,'<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);" model_type="' + val + '" onclick="updateModel(this,\'update_areadetect\')">更新</a>');
            AREA_DETECT_Table_Tbody.appendChild(tr3);
            i++;
        })
            i = 1;
        $.each(RECALL,function (key,val) {
            var RECALL_Table_Tbody =  document.getElementById('RECALL_Table_Tbody');
            var tr3 = document.createElement('tr');
            addElement(tr3,i,'RECALL',key,val,'<a class="layui-btn layui-btn-primary layui-btn-xs" href="javascript:void(0);" model_type="'+val+'" onclick="updateModel(this,\'update_recall\')">更新</a>');
            RECALL_Table_Tbody.appendChild(tr3);
            i++;
        })

        function addElement( tr, order ,model , alias , model_name , href) {
            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            var td4 = document.createElement('td');
            var td5 = document.createElement('td');
            td1.innerText = order;
            td2.innerText = model;
            td3.innerText = alias;
            td4.innerText = model_name;
            td5.innerHTML = href;
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);
        }

        function updateModel(obj,model_type) {
            var model_name = $(obj).attr("model_type");
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        var res = request.responseText;
                        if(res=="success"){
                          return  layer.msg('['+model_type+']['+model_name+']更新成功！', {time: 2000});
                        }
                        if(res=="fail"){
                           return  layer.msg('['+model_type+']['+model_name+']更新失败！', {time: 2000});
                        }
                    } else {
                        return alert(request.status);
                    }
                }
            }
            request.open("GET", '/'+model_type+'/'+model_name+'/'+token,false);
            request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            request.send(JSON.stringify(''));
        }

        function batchUpdate(obj,model_type){
            var tbody = $(obj).parent().parent().parent().next();
            var as = $(tbody).find('a');
            var SuccessModel = '';
            var ErrorModel = '';
            for (var i=0 ; i<as.length ; i++){
                var model_name = $(as[i]).attr("model_type");
                if(model_name==null||model_name==''||model_name=='null') continue;

                var request = new XMLHttpRequest();
                request.onreadystatechange = function () {
                    if (request.readyState === 4) {
                        if (request.status === 200) {
                            var res = request.responseText;
                            if(res=="success"){
                                //layer.msg('['+model_type+']['+model_name+']更新成功！', {time: 2000});
                                SuccessModel = SuccessModel + '['+model_name+']';
                            }
                            if(res=="fail"){
                                ErrorModel = ErrorModel + '['+model_name+']';
                            }
                        } else {
                             console.log('['+model_type+']['+model_name+']'+request.status);
                        }
                    }
                }
                request.open("GET", '/'+model_type+'/'+model_name+'/'+token,false);//同步执行
                request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                request.send(JSON.stringify(''));
            }
            var msg = '';
            if(SuccessModel != '') msg = msg + SuccessModel+'更新成功！';
            if(ErrorModel != '' ) msg = msg + ErrorModel+'更新失败！';
            if(msg=='') msg = '没有更新模块';
            layer.msg( msg , {time: 2000});
        }
    </script>
</body>
</html>